<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--bootstarp固定的样式-->
    <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <!--样式修改-->
    <link rel="stylesheet" href="../css/personal.css">
    <link rel="stylesheet" href="../css/commen.css">
</head><body class="visible-sm visible-xs visible-lg visible-md">
<header>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Campus Blog</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">首页<span class="sr-only">(current)</span></a></li>
                    <li><a href="#">资源</a></li>
                    <li><a href="#">发布</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">社团活动 <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">武术社</a></li>
                            <li><a href="#">轮滑社</a></li>
                            <li><a href="#">动漫蛇</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">穿搭馆</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">学生会</a></li>
                        </ul>
                    </li>
                </ul>
                <form class="navbar-form navbar-left" method="post" action="index">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Input your idea">
                    </div>
                    <button type="submit" class="btn btn-default ">search</button>
                </form>
                <ul class="nav navbar-nav navbar-right">
                    <li><a class="glyphicon glyphicon-user" href="#"><!--用户头像连接--></a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> about of me <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">开发人员</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">more context</a></li>
                        </ul>
                    </li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
</header>
<!--myself个人信息-->
<div class="user__image">
    <div class="user__img ">
        <img src="../picture/0x300a0a0.png" class="img-circle ">
    </div>
    <div class="user__signature">菜徐阳</div>
    <div class="user__proverb">蔡徐坤？不菜徐阳</div>
</div>
<!--个人内容-->
    <div class="row  total wrapper center-block">

        <span class="col-md-3 col-md-pull-9 left">
            <!--学校信息-->
            <div class="school-msg angle">
                <div class="page-header">
                    <h1 class="text-center">
                        <small class="text-center">吉林大学</small>
                    </h1>
            </div>
            <p class="text-center">2000年10月10日入学</p>

            </div>
            <!--个人博客信息-->
                <div class="medal-msg angle">
                    <div class="list-group">
                        <!--被赞数量-->
                        <ul class="list-group">
                                <li class="glyphicon glyphicon-heart-empty list-group-item">
                                     <span class="badge">0</span>
                                作品数量
                            </li>
                        </ul>
                        <!--评论数-->
                        <ul class="list-group">
                                <li class="glyphicon glyphicon-bookmark list-group-item">
                                     <span class="badge">0</span>
                                粉丝数
                            </li>
                        </ul>
                        <!--发表作品数量-->
                        <ul class="list-group">
                                <li class="glyphicon glyphicon-paperclip  list-group-item">
                                     <span class="badge">0</span>
                                评论互动数量
                            </li>
                        </ul>
                    </div>


            </div>
        </span>
        <span class="col-md-9 col-md-push-3 right">
            <!--个人页面导航栏-->
            <div class="conduction-msg angle">
                <ul class="nav nav-tabs">
                    <li class="active"><a class="previous" href="index.html">Home</a></li>
                    <li ><a href="#">管理员页面</a></li>
                    <li><a href="#">文章</a></li>
                    <li><a href="#">订阅/关注</a></li>
                    <li><a href="#">收藏</a></li>
                    <li><a href="#">文件</a></li>
                </ul>
            </div>
            <!--页面信息显示栏-->
            <div class="dir-msg angle">

                <!-- 4:3 aspect ratio -->
                <div class="embed-responsive embed-responsive-4by3">
                    <iframe class="embed-responsive-item " scrolling="yes" style="height: 3.8rem" src="index.html"></iframe>
                </div>
            </div>

        </span>
    </div>

<!--页脚-->
<footer>
    <br class="modal-footer">
    <p>Copyright &copy; cn.bless.com 版权所有 | 消费者维权热线: 4006067733 | 无执照 | 法外狂徒</p>
    <p><span class="glyphicon glyphicon-globe foot-span">&nbsp;|&nbsp;地球专属&nbsp;|&nbsp;</span ><span class="glyphicon glyphicon-sound-stereo foot-span"></span></p>
</footer>

</body>
<!--bootstrap框架需要JQuery 的支持-->
<script src="../bootstrap-3.3.7-dist/jquery-3.4.1/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="application/javascript">

</script>
</html>